<template>
	<view class="main-page">
		<view class="header-box">
			<image class="avatar" src="../../static/common/ic_avatar_male.png" v-if="customerData.sex == 1"></image>
			<image class="avatar" src="../../static/common/ic_avatar_female.png" v-if="customerData.sex == 0"></image>
			<view class="column-container">
				<text class="font-333-32 font-weight-600">{{customerData.realName}}</text>
				<view class="row-container mt-4">
					<text class="font-333-26">ID：{{customerData.id}}</text>
					<view class="line"></view>
					<text class="font-333-26">联系电话：{{customerData.mobile}}</text>
				</view>
				<text class="font-999-26 mt-4" v-if="customerData.lastTime">上次到店时间：{{customerData.lastTime}}</text>
				<text class="font-999-26 mt-4" v-else>暂无到店记录</text>
			</view>
		</view>
		
		<view class="high-box">
			<text class="font-666-28 width-140 mr-60" style="flex-shrink: 0;">设备</text>
			<view class="row-container width-100p" style="flex-wrap: wrap;">
				<view class="row-container mr-80 mb-24" v-for="(bedItem , bedIndex) in bedList"
				:key="bedIndex" @click="changeBed(bedItem)">
					<image class="wh-32 mr-10" v-if="commitParams.deviceId == bedItem.id"
					src="../../static/common/ic_chosen_true.png"></image>
					<image class="wh-32 mr-10" v-else
					src="../../static/common/ic_chosen_false.png"></image>
					<text class="font-333-28 font-weight-600">{{bedItem.name}}</text>
				</view>
			</view>
		</view>
		
		<view class="divider-1 ml-30 mr-30"></view>
		<view class="single-box">
			<text class="font-666-28 width-140 mr-60" style="flex-shrink: 0;">日期</text>
			<picker mode="date" v-model="date" @change="changeDate" :start="minDate">
				<view class="row-container">
					<text class="font-333-28 font-bold">{{date ? date:'请选择日期'}}</text>
					<image class="wh-20 ml-4" src="../../static/common/ic_arrow_right.png"></image>
				</view>
			</picker>
		</view>
		<view class="divider-1 ml-30 mr-30"></view>
		<view class="single-box">
			<text class="font-666-28 width-140 mr-60" style="flex-shrink: 0;">开始时间</text>
			<picker mode="time" v-model="startHour"
			@change="changeStartTime" :start="minHour" :end="maxHour">
				<view class="row-container">
					<text class="font-333-28 font-bold">{{startHour ? startHour:'请选择开始时间'}}</text>
					<image class="wh-20 ml-4" src="../../static/common/ic_arrow_right.png"></image>
				</view>
			</picker>
		</view>
		<view class="divider-1 ml-30 mr-30"></view>
		<view class="single-box">
			<text class="font-666-28 width-140 mr-60" style="flex-shrink: 0;">结束时间</text>
			<picker mode="time" v-model="endHour"
			 @change="changeEndTime" :start="minHour" :end="maxHour">
				<view class="row-container">
					<text class="font-333-28 font-bold">{{endHour ? endHour:'请选择结束时间'}}</text>
					<image class="wh-20 ml-4" src="../../static/common/ic_arrow_right.png"></image>
				</view>
			</picker>
		</view>
		<view class="high-box mb-195" style="flex-direction: column;">
			<text class="font-666-28 width-140 mr-60" style="flex-shrink: 0;">预约情况</text>
			<view class="divider-1 mt-24" style="width: 100%;"></view>
			<view class="list-item" v-if="morningTimeList && morningTimeList.length > 0">
				<text class="font-333-28 font-weight-600 width-126" style="flex-shrink: 0;">上午</text>
				<view class="row-container" style="flex-wrap: wrap;">
					<view class="single-time-box" v-for="(timeItem,timeIndex) in morningTimeList" 
					:key="timeIndex">
						<text class="font-333-24 font-weight-600">{{timeItem.startTime + "-" + timeItem.endTime}}</text>
						<view class="line"></view>
						<text class="font-3cb-24 font-weight-600">已预约</text>
					</view>
				</view>
			</view>
			<view class="divider-1 mt-24" style="width: 100%;" v-if="morningTimeList && morningTimeList.length > 0"></view>
			<view class="list-item" v-if="afternoonTimeList && afternoonTimeList.length > 0">
				<text class="font-333-28 font-weight-600 width-126" style="flex-shrink: 0;">下午</text>
				<view class="row-container" style="flex-wrap: wrap;">
					<view class="single-time-box" v-for="(timeItem,timeIndex) in afternoonTimeList" 
					:key="timeIndex">
						<text class="font-333-24 font-weight-600">{{timeItem.startTime + "-" + timeItem.endTime}}</text>
						<view class="line"></view>
						<text class="font-3cb-24 font-weight-600">已预约</text>
					</view>
				</view>
			</view>
			<view class="divider-1 mt-24" style="width: 100%;" v-if="afternoonTimeList && afternoonTimeList.length > 0"></view>
			<view class="list-item" v-if="eveningTimeList && eveningTimeList.length > 0">
				<text class="font-333-28 font-weight-600 width-126" style="flex-shrink: 0;">晚上</text>
				<view class="row-container" style="flex-wrap: wrap;">
					<view class="single-time-box" v-for="(timeItem,timeIndex) in eveningTimeList" 
					:key="timeIndex">
						<text class="font-333-24 font-weight-600">{{timeItem.startTime + "-" + timeItem.endTime}}</text>
						<view class="line"></view>
						<text class="font-3cb-24 font-weight-600">已预约</text>
					</view>
				</view>
			</view>
			
			<view class="column-container-center width-100p pb-100" v-if="(!morningTimeList || morningTimeList.length < 1)
			 && (!afternoonTimeList || afternoonTimeList.length < 1) && (!eveningTimeList || eveningTimeList.length < 1)">
				<image class="empty-ic" src="../../static/common/ic_no_client.png"></image>
				<text class="font-666-28">暂无预约</text>
			</view>
			
			
		</view>
		
		<view class="bottom-box">
			<text class="red-btn ml-30 mt-40" v-if="date && startHour && endHour 
			&& commitParams.deviceId && commitParams.customId" @click="handleCommit">确认修改</text>
			<text class="red-negative-btn ml-30 mt-40" v-else>确认修改</text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appointId:'',// 预约id
				customerId:'' ,// 客户id
				customerData:{} , //客户详情
				appointInfoData:{} , //预约详情
				
				
				commitParams:{
					realName:'',
					mobile:'',
					startTime:"",
					endTime: "",
					sex:0,
					deviceId:'',
					deviceName:'',
					customId:'',
				},
				date:'',
				startHour:'',
				endHour:'',

				bedList:[],
				morningTimeList:[],
				afternoonTimeList:[],
				eveningTimeList:[],
				
				maxHour:'' , // 最晚的时间
				minHour:'' , // 最早的时间
				minDate:'' , // 可选择的最小日期
			}
		},
		
		onShow() {
			this.maxHour = this.cookie.get("ap_user_data").shopEndTime
			this.minHour = this.cookie.get("ap_user_data").shopStartTime
			let now = new Date()
			this.minDate = now.toISOString().split('T')[0]
		},
		
		onLoad(options) {
			this.appointId = options.appointId
			this.customerId = options.customerId
			this.loadBedList()
			this.loadCustomerDetail()
		},
		
		methods: {
			changeDate(e){
				this.date = e.detail.value
				this.loadAppointList()
			},
			changeStartTime(e){
				this.startHour = e.detail.value
				if (this.endHour && this.endHour <= this.startHour){
					uni.showToast({
						title:'结束时间需晚于开始时间',
						icon:'none'
					})
					this.endHour = ""
				}
			},
			changeEndTime(e){
				this.endHour = e.detail.value
				if (this.startHour && this.endHour <= this.startHour){
					uni.showToast({
						title:'结束时间需晚于开始时间',
						icon:'none'
					})
					this.endHour = ""
				}
			},

			changeBed(item){
				this.commitParams.deviceId = item.id
				this.commitParams.deviceName = item.name
				this.loadAppointList()
			},
			
			//加载设备数据
			loadBedList(){
				let that = this
				this.http({
					url:'/user/device/findList',
					method:'POST',
					data:{
						pageNo: 1,
						pageSize: 1000
					},
					success(res){
						if (res.code == 200){
							that.bedList = res.data
							that.loadAppointInfo()
						}
					},
					failed(e){
					}
				})
			},
			
			loadCustomerDetail(){
				if (!this.customerId) return
				let that = this
				this.http({
					url:'/user/custom/findDetail',
					method:'POST',
					data:{
						customId : that.customerId
					},
					success(res){
						if (res.code == 200){
							that.customerData =  res.data
						}
					},
					failed(e){
					}
				})
				
			},
			
			loadAppointInfo(){
				if (!this.appointId) return
				let that = this
				this.http({
					url:"/yy/custom/detail",
					method:"POST",
					data:{
						id:this.appointId
					},
					success(data){
						if (data.code == 200){
							that.appointInfoData = data.data
							that.date = that.appointInfoData.startTime.split(' ')[0]
							that.startHour = that.appointInfoData.startTimeStr.split(' ')[1]
							that.endHour = that.appointInfoData.endTimeStr.split(' ')[1]
							that.commitParams.deviceId = that.appointInfoData.deviceId
							that.commitParams.deviceName = that.appointInfoData.deviceName
							
							if (that.appointInfoData.customList 
							&& that.appointInfoData.customList.length > 0){
								let user = that.appointInfoData.customList[0]
								that.commitParams.realName = user.realName
								that.commitParams.sex = user.sex
								that.commitParams.customId = user.customId
								that.commitParams.mobile = user.mobile
							}
							
							that.loadAppointList()
						}
					},
					failed(e){
						
					}
				})
			},
			
			loadAppointList(){
				if (!this.commitParams.deviceId || !this.date) return
				let that = this
				this.http({
					url:'/yy/custom/findListByDate',
					method:'POST',
					data:{
						dayTime : this.date,
						deviceId : this.commitParams.deviceId
					},
					success(res){
						if (res.code == 200 && res.data){
							that.morningTimeList = res.data.morningList
							that.afternoonTimeList = res.data.afternoonList
							that.eveningTimeList = res.data.nightList
						}
					},
					failed(e){
					}
				})
			},
			
			//提交预约
			handleCommit(){
				
				if (this.isTimeOverlap()){
					uni.showToast({
						title:'选择时间段已有预约',
						icon:'none'
					})
					return
				}
				
				this.commitParams.startTime = this.date + " " + this.startHour  + ":00"
				this.commitParams.endTime = this.date + " " + this.endHour + ":00"
				this.commitParams.id = this.appointId
				
				
				let startMill = new Date(this.commitParams.startTime).getTime()
				let currentMill = new Date().getTime()
				
				if (startMill <= currentMill){
					uni.showToast({
						title:'预约时间需晚于当前时间',
						icon:'none'
					})
					return
				}
				
				// this.commitParams.startTime = this.startHour
				// this.commitParams.endTime = this.endHour
				
				let that = this
				this.http({
					url:'/yy/custom/saveOrUpdateReservation',
					method:'POST',
					data:this.commitParams,
					header:{
						"content-type": "application/json",
						'Authorization': uni.getStorageSync("ap_token")
					},
					success(res){
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						
						if (res.code == 200){
							uni.$emit("refreshIndexData")
							uni.navigateBack()
						}
					},
					failed(e){
					}
				})
				
				
			},
			
			isTimeOverlap(){
				let commitStartTime = this.startHour
				let commitEndTime = this.endHour
				
				let overlap = false
				
				for (let i = 0 ; i < this.morningTimeList.length ; i ++){
					let item = this.morningTimeList[i]
					if (item.id == this.appointId || commitEndTime <= item.startTime || item.endTime <= commitStartTime){
						
					} else{
						overlap = true
						break
					}
				}
				
				
				if (!overlap){
					for (let i = 0 ; i < this.afternoonTimeList.length ; i ++){
						let item = this.afternoonTimeList[i]
						if (item.id == this.appointId || commitEndTime <= item.startTime || item.endTime <= commitStartTime){
						} else{
							overlap = true
							break
						}
					}
				}
				
				if (!overlap){
					for (let i = 0 ; i < this.eveningTimeList.length ; i ++){
						let item = this.eveningTimeList[i]
						if (item.id == this.appointId || commitEndTime <= item.startTime || item.endTime <= commitStartTime){
						} else{
							overlap = true
							break
						}
					}
				}
				return overlap
			}
			
		}
	}
</script>

<style lang="scss">
	.header-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: calc(100% - 60rpx);
		height: 165rpx;
		margin-top: 20rpx;
		padding: 0rpx 30rpx;
		background: white;
		
		.avatar{
			width: 80rpx;
			height: 80rpx;
			margin-right: 24rpx;
		}
		
		.line{
			width: 1rpx;
			height: 16rpx;
			margin: 0rpx 16rpx;
			background: #999999;
		}
	}
	
	.single-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: calc(100% - 60rpx);
		height: 88rpx;
		background: white;
		padding: 0rpx 30rpx;
	}
	
	.high-box{
		display: flex;
		flex-direction: row;
		width: calc(100% - 60rpx);
		margin-top: 20rpx;
		padding: 24rpx 30rpx 0rpx 30rpx;
		background: white;
	}
	
	.list-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		padding: 24rpx 0rpx 4rpx 0rpx;
		
		.single-time-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 8rpx 15rpx;
			border: #D9D9D9 solid 1rpx;
			border-radius: 26rpx;
			margin: 0rpx 0rpx 20rpx 20rpx;
			
			.line{
				width: 1rpx;
				height: 18rpx;
				background: #D9D9D9;
				margin: 0rpx 7rpx;
			}
		}
	}
	
	.empty-ic{
		width: 82rpx;
		height: 82rpx;
		margin-top: 40rpx;
		margin-bottom: 10rpx;
	}
	
	.bottom-box{
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 195rpx;
		background: #F5F5F5;
		position: fixed;
		bottom: 0;
		z-index: 100;
		
	}
	
</style>
